{include file="public/head"}

<body>
    <div class="payment">
        <div class="payment-item payment-item-active" status='1'>已付款</div>
        <div class="payment-item" status='0'>待付款</div>
    </div>
    <!-- 已付款 -->
    <div class="paid ">
    </div>
    <!-- 待付款 -->
    <div class="pending-pay hide">
    </div>
    <div class="commodity-btn">
        上滑加载更多...
    </div>
    <div style="height: 1.3rem;"></div>
    {include file="public/footer"}

    <script src="__STATIC__/home/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/home/js/public.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $(document).on('click', '.payment-item', function () {
                $('.commodity-btn').html('上滑加载更多...');
                page = 1;
                status = $(this).attr('status');
                $('.paid').html('');
                $('.pending-pay').html('');
                $('.payment-item-active').removeClass('payment-item-active');
                $(this).addClass('payment-item-active');
                if (status == '0') {
                    $('.pending-pay').removeClass('hide');
                    $('.paid').addClass('hide');
                    orderNotData();
                } else {
                    $('.pending-pay').addClass('hide');
                    $('.paid').removeClass('hide');
                    requestList();
                }
            });
        });
        var page = 1;
        var status = $('.payment-item-active').attr('status');
        requestList();
        //请求订单
        function requestList() {
            // 订单已支付接口
            $.ajax({
                type: 'POST',
                url: '/index/order/orderData',
                data: {
                    page,
                    limit: 10
                },
                success(res) {
                    if (res.code == 1) {
                        var list = res.data || [];
                        var html = '';
                        list.forEach(function (item) {
                            html += `
                                    <div href="" class="commodity">
                                        <img src="${item.image}" alt="...">
                                        <div class="commodity-r">
                                            <a href="/index/order/info?id=${item.id}">
                                                <div class="overflow-one">${item.good_name}</div>
                                                <p>${item.order_types}</p>
                                                <span>&#155</span>
                                            </a>
                                            <div class="time overflow-one">支付时间：${item.create_time}</div>
                                            <div>
                                            <div class="${item.order_status == '拼团中' ? 're' : ''}">${item.order_status}</div>
                                            <a href="${item.order_url}" class="reminder ${item.order_text == '温馨提示' ? '' : 'gr'}">${item.order_text}</a>
                                            </div>
                                        </div>
                                    </div>
                                `;
                        });
                        $('.paid').append(html);
                    } else {
                        $('.commodity-btn').html('暂无更多数据');

                    }
                },
                error() {
                    alert('订单已支付接口错误');
                }
            });
        };
        $(window).scroll(function () {
            if ($(document).scrollTop() <= 0) { }
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                page++;
                requestList();
            }
        });

        // 订单未支付接口
        function orderNotData() {
            $.ajax({
                url: '/index/order/orderNotData',
                type: 'POST',
                success(res) {
                    if (res.code == 1) {
                        var list = res.data || [];
                        var html = '';
                        list.forEach(function (item) {
                            html += `
                                    <div class="commodity">
                                        <img src="${item.image}" alt="...">
                                        <div class="commodity-r">
                                            <a href="/index/order/info?id=${item.id}">
                                                <div class="overflow-one">${item.good_name}</div>
                                                <p>${item.order_type}</p>
                                                <span>&#155</span>
                                            </a>
                                            <div class="time overflow-one"></div>
                                            <div>
                                                <div class="dai">待付款</div>
                                                <div class="price">
                                                    <i>￥</i>${item.pay_money}
                                                </div>
                                                <div  order_id="${item.id}"  class="pay">去支付</div>
                                            </div>
                                        </div>
                                    </div>
                                `;
                        });
                        $('.pending-pay').append(html);
                    }
                },
                error() {
                    alert('订单未支付接口错误');
                }
            })
        };

        // 支付
        $(document).on('click', '.pay',function () {
            var order_id = $(this).attr('order_id');
            $.ajax({
                type: 'post',
                data: {
                    order_id,
                },
                url: '/index/goods/orderListPay',
                success(res) {
                    if (res.code == 1) {
                        window.location.href = res.jump_url;
                    } else {
                        alert(res.msg);
                        $.ajax({
                            type: 'post',
                            data: {
                                order_id,
                            },
                            url: '/index/goods/orderDel',
                            success(res) { }
                        });

                    }
                }
            });
        });
    </script>
</body>

</html>